<template>
	<view class="b_content">
		<!-- <view class="b_item">
			<view class="input_box">
				<text class="i_txt">请选择</text>
				<view style="display: flex;flex: 1;flex-direction: row;justify-content: space-around;align-items: center;">
					<picker class="selectBox" mode="selector" range-key="cityName" :value="shengIndex" :range="shengList" @change="bindshengSelectChange">
					<view class="selectBox selectTxt">{{defaultShengName}}</view>
					</picker>
					<picker class="selectBox" mode="selector" range-key="cityName" :value="shiIndex" :range="shiList" @change="bindshiSelectChange">
						<view class="selectTxt">{{defaultShiName}}
							<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
						</view>
					</picker>
					<picker class="selectBox" mode="selector" range-key="cityName" :value="xianIndex" :range="xainList" @change="bindxianSelectChange">
						<view class="selectTxt">{{defaultXianName}}
							<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
						</view>
					</picker>
				</view>
			</view>
		</view> -->
		<view class="b_item">
			<view class="input_box" @click="showOrg = true">
				<text class="i_txt">学&nbsp;&nbsp;&nbsp;校</text>
				<input type="text" style="flex: 1;" v-model="orgName" :disabled="true" placeholder-class="account-txt"
				 class="uni-input" placeholder="请输入学生所在机构" />
			</view>
			<!-- 	<view v-if="isValue" class="list_box" :style="{height: schCount > 10 ? '480rpx': 'auto', overflow: schCount > 10 ? 'scroll' : ''}">
				<view @click.stop="cliName(item)" v-for="(item, ind) in sList" :key="ind">
					<text style="font-size: 26rpx;">{{item.orgName}}</text>
				</view>
				<text class="tishiTxt" v-if="schCount == 0">{{schErrTxt}}</text>
				<view style="display: flex;flex-direction: row;">
					<text @click="toCancel" class="tishiTxt more" v-if="schCount > 10">关闭</text>
				</view>
			</view> -->
		</view>
		<view class="b_item">
			<view class="input_box">
				<text class="i_txt">卡&nbsp;&nbsp;&nbsp;号</text>
				<input type="text" @blur="carNoLen" v-model="cardNo" placeholder-class="account-txt" class="uni-input" placeholder="请输入学生卡号" />
			</view>
		</view>
		<view class="b_item">
			<view class="input_box">
				<text class="i_txt">卡密码</text>
				<input type="password" v-model="cardPwd" placeholder-class="account-txt" class="uni-input" placeholder="请输入学生卡密码" />
			</view>
		</view>
		<view class="a_content_btn">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toBind">新增绑定</button>
		</view>
		<popup-org title="选择机构" v-model="showOrg" :parentId="parentId" @change="cliName"></popup-org>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :showCancel="false" :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :content="content1" :title="title1" :showCancel="false" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {
		queryOrg,
		bindEmp,
		findBaseArea
	} from '../../common/api/index.js'
	import {
		_showToast,
		_showLoading
	} from '../../common/js/util.js'
	import popupOrg from '../../components/custom-popup-org/custom-popup-org.vue'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				cardNo: '',
				cardPwd: '',
				orgId: '',
				orgName: '',
				parentId: '',
				showOrg: false,
				showMcModal: false,
				content: '',
				title: '',
				okBtn: '',
				showMcModal1: false,
				content1: '',
				title1: '',
			}
		},
		components: {
			popupOrg,
			mcModal,
			tmcModal
		},
		onShow: function() {
			this._shiList()
		},
		computed: {
			sList() {
				if (this.schCount == 0 && !this.isMore) {
					return this.schoolList = []
				}
				if (this.schCount <= 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && this.isMore) {
					return this.schoolList
				}
			}
		},
		methods: {
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				// uni.navigateTo({
				// 	url: '../me/paySetting'
				// })
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			queren() {
				this.showMcModal1 = false
			},
			toBind() {
				let s_userId = uni.getStorageSync('s_userId')
				if (this.selectName == '') {
					_showToast('请输入机构名称~')
				} else if (this.cardNo == '') {
					_showToast('请输入个人卡号~')
				} else if (this.cardPwd == '') {
					_showToast('请输入卡密码~')
				} else {
					_showLoading('绑定中,请稍后...')
					bindEmp({
						orgId: this.orgId,
						cardNo: this.cardNo,
						userId: s_userId,
						cardPwd: this.cardPwd,
						bindType: 1
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							// this.title = '绑卡成功'
							// this.content = '请设置支付密码'
							// this.okBtn = '前往设置'
							// this.showMcModal = true
							
							this.title = '温馨提示'
							this.content = '绑卡成功'
							this.okBtn = '确认'
							this.showMcModal = true
						} else {
							uni.hideLoading()
							this.showTxt('温馨提示', res.resultMsg)
						}
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
				}
			},
			pad(num, n) {
				var len = num.length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				this.cardNo = num;
				return num;
			},
			carNoLen() {
				if (this.cardNo.length == 0) {
					return
				} else if (this.cardNo.length < 8) {
					_showToast('卡号不足8位系统将自动补足')
					this.pad(this.cardNo, 8)
				}
			},
			cliName(obj) {
				this.orgId = obj.orgId;
				this.orgName = obj.orgName;
			},
			toCancel() {
				this.isValue = false
			}
		}
	}
</script>

<style lang="scss">
	.b_content {
		padding: 85rpx 50rpx;

		.b_item {
			margin-bottom: 40rpx;

			.input_box {
				background: #ffffff;
				border-radius: 8rpx;
				border: 1px solid #e6e6e6;
				height: 84rpx;
				padding: 0 20rpx;
				width: calc(100% - 30rpx);
				display: flex;
				flex-direction: row;
				align-items: center;

				.i_txt {
					font-size: 30rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #6b707a;
					width: 105rpx;
					// border-right: 1px solid #E6E6E6;
					margin-right: 18rpx;
				}

				.account-txt {
					font-size: 28rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #adadad;
				}
			}

			.list_box {
				width: 73.5%;
				position: absolute;
				padding: 20rpx;
				border: 0.5rpx solid rgba(0, 0, 0, 0.1);
				border-top: none;
				top: 265rpx;
				z-index: 999;
				background-color: #ffffff;
				box-shadow: 5px 5px 5px rgba(215, 215, 215, 0.349019607843137);
				left: 85rpx;
			}
		}

		.a_content_btn {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn_pri {
				margin-top: 60rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				width: 90%;
				font-size: 32rpx;
				font-family: "PingFangSC-Heavy, PingFang SC";
				font-weight: 600;
				color: #ffffff;
				background: linear-gradient(90deg, #0685ff 0%, #285eff 100%);
				box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
				border-radius: 8rpx;
			}
		}
	}

	.uni-input {
		display: flex;
		flex: 1;
		padding: 0;
	}

	.tishiTxt {
		font-size: 24rpx;
		color: #ddd;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.more {
		background-color: #477eda;
		line-height: 55rpx;
	}

	.selectBox {
		display: flex;
		// flex: 1;
		justify-content: center;
		align-items: center;
	}

	.selectBox:last-child {
		margin-right: 0;
	}

	.selectTxt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6b707a;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}
</style>
